<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Login Page</title>
    <style>
        * {
            /* 初始化 */
            margin: 0;
            padding: 0;
        }
        body {
            /* 100%窗口高度 */
            height: 100vh;
            /* 弹性布局 居中 */
            display: flex;
            justify-content: center;
            align-items: center;
            /* 渐变背景 */
            background: linear-gradient(200deg, #72afd3, #96fbc4);
        }
    </style>
    <script th:src="@{/js/crypto-js.min.js}"></script>
    <script th:src="@{/js/jquery-3.7.1.min.js}"></script>
    <script th:src="@{/js/jsencrypt.js}"></script>
</head>
<body>
<div class="login-box">

    <h5 style="text-align: left">系统当前时间：<b th:text="${nowTime}"></b></h5>
    <input type="hidden" id="publicKey" name="publicKey"  name="publicKey" th:text="${publicKey}" th:value="${publicKey}"/>

    <form id="loginForm" th:action="@{/login}" method="post">
        <div>
            <input type="text" id="username" name="username" placeholder="Username" required="required"/>
            <input type="password" id="password" name="password" placeholder="Password" required="required"/>
<!--            <input type="hidden" name="encryptedPassword"/>-->
            <input type="submit" value="Login" onclick="encryptPassword()"/>
        </div>
    </form>
</div>
<script>
    function encryptPassword() {
        var password = document.getElementById('password').value;
        // var encryptedPassword = CryptoJS.AES.encrypt(password, 'your-secret-key').toString();
        // document.getElementById('loginForm').encryptedPassword.value = encryptedPassword;
        var encrypt = new JSEncrypt();
        var publicKey = document.getElementById('publicKey').value;
        console.log("publicKey:" + publicKey)
        encrypt.setPublicKey(publicKey)
        var encryptPwd = encrypt.encrypt(password)
        console.log("encryptPwd:" + encryptPwd)
        // document.getElementById('loginForm').password.value = encryptPwd;
        document.getElementById('password').value= encryptPwd;
        document.getElementById('loginForm').submit();
        // 去除表单中的password字段，然后以post类型提交表单到链接/login
        // document.getElementById('loginForm').submit(); // or document.forms[0].submit() or document.querySelector('#loginForm').submit()
    }
</script>

</body>
</html>